<template>
  <div class="info base-main">
    <div class="tip-view flex">
      <p>首页 / 商品管理 / 产品列表 / 详情页</p>
      <div>
        <el-button @click="backAction">返回</el-button>
      </div>
    </div>
    <div class="top">
      <p class="tl3-title">产品详情</p>
      <div class="top-detail flex flexwrap">
        <p>产品名称：测试产品</p>
        <p>产品编号：9283839393884849993</p>
        <p>创建时间：2020-09-30</p>
        <p>购买人：思考开始</p>
        <p>寄送人：舒克舒克看到</p>
        <p>价格：12万</p>
        <el-divider />
      </div>
      <p class="tl3-title">用户详情</p>
      <div class="top-detail flex flexwrap">
        <p>用户姓名：王大川</p>
        <p>用户电话：18289933388</p>
        <p>下单时间：2020-09-30</p>
        <p>支付时间：2020-09-30</p>
        <p>寄送地址：思考开始</p>
        <p>购买人：舒克舒克看到</p>
        <p>价格：12万</p>
        <el-divider />
      </div>
    </div>
    <div class="tables">
      <el-tabs v-model="activeName" style="line-height: 60px;" size="large">
        <el-tab-pane label="服务记录" name="first" />
        <el-tab-pane label="通话记录" name="second" />
        <el-tab-pane label="投保记录" name="third" />
      </el-tabs>
      <simpleTable
        header-bg-color="#f5f7fa"
        :is-show-serial-number="false"
        :is-show-operation="false"
        :table-data="chartData.rows"
        :props="callProps"
      />
    </div>
  </div>
</template>
<script>
import simpleTable from './../../components/simpleTable'
export default {
  name: 'Detail',
  components: {
    simpleTable
  },
  data() {
    return {
      activeName: 'first',
      chartData: {
        columns: ['dateTime', 'totalPrice'],
        rows: [
          {
            dateTime: '02/01',
            totalPrice: 1393,
            clickNum: 1093,
            peopleNum: 0.32,
            returnNum: 0.32,
            returnPrice: 0.32
          },
          {
            dateTime: '02/02',
            totalPrice: 3530,
            clickNum: 3230,
            peopleNum: 0.26,
            returnNum: 0.32,
            returnPrice: 0.32
          },
          {
            dateTime: '02/03',
            totalPrice: 2923,
            clickNum: 2623,
            peopleNum: 0.76,
            returnNum: 0.32,
            returnPrice: 0.32
          },
          {
            dateTime: '02/04',
            totalPrice: 1723,
            clickNum: 1423,
            peopleNum: 0.49,
            returnNum: 0.32,
            returnPrice: 0.32
          },
          {
            dateTime: '02/05',
            totalPrice: 3792,
            clickNum: 3492,
            peopleNum: 0.323,
            returnNum: 0.32,
            returnPrice: 0.32
          },
          {
            dateTime: '02/06',
            totalPrice: 4593,
            clickNum: 4293,
            peopleNum: 0.78,
            returnNum: 0.32,
            returnPrice: 0.32
          },
          {
            dateTime: '02/07',
            totalPrice: 4593,
            clickNum: 4293,
            peopleNum: 0.78,
            returnNum: 0.32,
            returnPrice: 0.32
          }
        ]
      },
      callProps: [
        {
          prop: 'dateTime',
          label: '日期'
        },
        {
          prop: 'clickNum',
          label: '点击量',
          sort: true // 是否可以筛选
        },
        {
          prop: 'peopleNum',
          label: '访问人数'
        },
        {
          prop: 'totalPrice',
          label: '净收入'
        },
        {
          prop: 'returnNum',
          label: '退款数'
        },
        {
          prop: 'returnPrice',
          label: '退款金额'
        }
      ]
    }
  },
  computed: {},
  created() {},
  mounted() {
  },
  methods: {
    backAction() {
      // this.$router.go(-1)
      this.$emit('backAction', 1)
    }
  }
}
</script>
<style lang="scss" scoped>
.info{
  .top{
    .top-detail{
        padding:0 20px;
        // border-bottom: 1px solid #e8e8e8;
        p{
            width: 300px;
            height: 35px;
            line-height: 35px;
            color: rgba(0,0,0,.85);
            font-size: 14px;
        }
    }
  }
  .tables{
      margin:20px;
  }

}

</style>
